<template>
  <div class="isbody">
    <el-card>
      <el-form ref="addRuleForm" :model="addForm" :rules="addRules" class="demo-ruleForm">
        <el-row>
          <el-col :span="6">
            <el-form-item label="库区编号" prop="code">
              <el-input v-model="addForm.code" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属仓库" prop="warehouseId">
              <el-select v-model="addForm.warehouseId" placeholder="请选择">
                <el-option v-for="item in queryList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="库区名称" prop="name">
              <el-input v-model="addForm.name" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="温度类型" prop="temperatureType">
              <el-select v-model="addForm.temperatureType" placeholder="请选择">
                <el-option label="常温" value="CW" />
                <el-option label="冷藏" value="LC" />
                <el-option label="恒温" value="HW" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="承重类型" prop="bearingType">
              <el-select v-model="addForm.bearingType" placeholder="请选择">
                <el-option label="重型" value="ZX" />
                <el-option label="轻型" value="QX" />
                <el-option label="中型" value="OX" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用途属性" prop="useType">
              <el-select v-model="addForm.useType" placeholder="请选择">
                <el-option label="入库缓存区" value="RKHCQ" />
                <el-option label="出库缓存区" value="CKHCQ" />
                <el-option label="存储区" value="CCQ" />
                <el-option label="分拣区" value="FJQ" />
                <el-option label="质检区" value="ZJQ" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="负责人" prop="personName">
              <el-input v-model="addForm.personName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model.number="addForm.phone" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="库区状态" prop="status">
              <el-radio-group v-model="addForm.status">
                <el-radio label="1">启用</el-radio>
                <el-radio label="0">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="text-align: center;">
      <el-button round @click="colBack">返回</el-button>
      <el-button class="btn" type="primary" round @click="submitList">提交</el-button>
    </el-card>
  </div>
</template>

<script>
import { addAreaApi, randomAreaApi, addArea, editArea, editAreaList } from '@/api/manage-base-info'
export default {
  data() {
    return {
      // 编辑数据
      editFrom: {

      },
      queryList: [],
      addForm: {
        // 编号
        code: '',
        // 所属仓库
        warehouseId: '',
        // 库区名称
        name: '',
        // 承重类型
        bearingType: '',
        // 用途属性
        useType: '',
        // 负责人
        personName: '',
        // 联系电话
        phone: '',
        // 启用
        status: '1',
        //  修改按钮需要 提交与时间  不影响添加
        createName: '',
        createTime: '',
        createUser: '',
        updateName: '',
        updateTime: '',
        updateUser: '',
        logicDel: '',
        id: '',
        includedNum: '',
        remark: '',
        personId: '',
        type: ''

      },
      addRules: {
        code: [{ required: true, message: '请输入库区编号', trigger: 'blur' }],
        warehouseId: [{ required: true, message: '请输入所属仓库', trigger: 'blur' }],
        name: [{ required: true, message: '请输入库区名称', trigger: 'blur' }],
        temperatureType: [{ required: true, message: '请输入温度类型', trigger: 'blur' }],
        bearingType: [{ required: true, message: '请输入承重类型', trigger: 'blur' }],
        useType: [{ required: true, message: '请输入用途属性', trigger: 'blur' }],
        personName: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
        status: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }, { pattern: /^1[3-9]\d{9}$/, trigger: 'blur', message: '请输入正确手机号格式' }]
      }

    }
  },
  async created() {
    // 随机数
    this.getrandomAreaApi()
    // 下拉
    const res = await addAreaApi()
    this.queryList = res.data
    // 编辑数据
    const res2 = await editArea(this.$route.params.id)
    this.editFrom = res2.data
    console.log(this.editFrom)
    this.addForm.code = this.editFrom.code
    this.addForm.bearingType = this.editFrom.bearingType
    this.addForm.temperatureType = this.editFrom.temperatureType
    this.addForm.useType = this.editFrom.useType
    this.addForm.warehouseId = this.editFrom.warehouseId
    this.addForm.name = this.editFrom.name
    this.addForm.personName = this.editFrom.personName
    this.addForm.phone = this.editFrom.phone
    // 提交与时间
    this.addForm.createName = this.editFrom.createName
    this.addForm.createTime = this.editFrom.createTime
    this.addForm.createUser = this.editFrom.createUser
    this.addForm.updateName = this.editFrom.updateName
    this.addForm.updateTime = this.editFrom.updateTime
    this.addForm.updateUser = this.editFrom.updateUser
    this.addForm.logicDel = this.editFrom.logicDel
    this.addForm.includedNum = this.editFrom.includedNum
    this.addForm.remark = this.editFrom.remark
    this.addForm.personId = this.editFrom.personId
    this.addForm.type = this.editFrom.type
    this.addForm.id = this.$route.params.id
  },
  methods: {
    // 随机数
    async getrandomAreaApi() {
      if (this.$route.params.id === 'null') {
        const res = await randomAreaApi()
        this.addForm.code = res.data
      }
    },
    async submitList() {
      if (this.$route.params.id === 'null') {
        await addArea(this.addForm)
        this.$message.success('添加成功！')
        this.$router.back()
      } else {
        await editAreaList(this.addForm)
        this.$message.success('修改成功！')
        this.$router.back()
      }
    },
    colBack() {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.isbody{
  padding: 20px;
}
.el-card{
  padding: 12px;
}
::v-deep .el-form-item__label{
  margin-top: -10px;
  font-size: 12px;
}
.el-col{
  padding-left: 15px;
    padding-right: 15px;
}
.el-select {
  width: 100%;
}
.el-radio-group{
  width: 100%;
}
.btn{
  color: #000;
}
.el-button{
  width: 170px;
}
</style>
